<template>
	<view class="search">
		<view class="tab">
			<uni-segmented-control :current="current" :values="items" style-type="text" @clickItem="onClickItem" />
		</view>
		<view class="con-wrap">
			<view class="scrollWrap">
				<z-paging :fixed="false" ref="paging" v-model="evaluateList" @query="queryList">
					<template #empty>
						<emptyView></emptyView>
					</template>
					<view class="box-container" v-if="evaluateList.length !== 0">
						<view class="mid" v-for="(item, index) in evaluateList" :key="index">
							<image :src="$fullImageUrl(item.appraisal.coverImage)"></image>
							<view class="mid-con">
								<view>{{ item.appraisalName }}</view>
								<view>
									<text>测试时间：{{ item.appraisalBeginDate }}</text>
								</view>
							</view>
							<view class="right-con">
								<view class="contine" @click="contineE(item)" v-if="current === 0">继续测评</view>
								<view v-if="current === 1" @click="readReport(item)">查看报告</view>
							</view>
						</view>
					</view>
					<!-- <emptyView v-if="evaluateList.length === 0 && current === 0"></emptyView>
					<emptyView v-if="evaluateList.length === 0 && current === 1"></emptyView> -->
				</z-paging>
			</view>
		</view>
	</view>
</template>

<script>
import { getUserAppraisalList } from '@/api/evaluate/index.js';
export default {
	data() {
		return {
			items: ['未完成', '已完成'],
			current: 0,
			evaluateList: []
		};
	},
	onShow() {
		this.$refs.paging.reload();
	},
	methods: {
		onClickItem(e) {
			if (this.current !== e.currentIndex) {
				this.current = e.currentIndex * 1;
				this.$refs.paging.reload();
			}
		},
		queryList(pageNum, pageSize) {
			const querys = {
				pageNum,
				pageSize,
				appraisalStatus: this.current
			};
			getUserAppraisalList(querys).then((res) => {
				let list = [...res.rows];
				this.$refs.paging.completeByTotal(list, res.total);
			});
		},
		contineE(item) {
			this.$tab.navigateTo(`/subset/pages/evaluate/evaluateQuestion?id=${item.appraisalId}`);
		},
		readReport(item) {
			this.$tab.navigateTo(`/subset/pages/evaluate/evaluateResult?id=${item.id}&appraisalId=${item.appraisalId}`);
		}
	},
	onUnload() {
		this.current = -1;
	}
};
</script>

<style scoped lang="scss">
.search {
	width: 100%;
	height: 100%;
	background: #f7f6f9;
	padding-top: 10rpx;
	overflow: hidden;
	.tab {
		width: 100%;
		height: 60rpx;
		// margin: 10rpx 0;
		background-color: #fff;
		padding: 0 40rpx;
		box-sizing: border-box;
		// display: flex;
		// justify-content: center;
		// align-items: center;
		display: grid;
		grid-template-columns: auto;

		::v-deep .segmented-control__item {
			// width: 20% !important;
		}

		::v-deep .segmented-control {
			grid-column: 1;
			display: flex;
			justify-content: space-around;
			align-items: center;
		}
	}

	.con-wrap {
		width: 100%;
		height: calc(100% - 80rpx);
		overflow: hidden;
		.scrollWrap {
			width: 100%;
			height: 100%;
		}
		.box-container {
			width: 100%;
			background-color: #fff;
			padding: 0 30rpx 30rpx 30rpx;
			box-sizing: border-box;
			overflow: hidden;
			.mid {
				width: 100%;
				height: 160rpx;
				display: flex;
				margin-top: 30rpx;
				justify-content: space-between;

				image {
					width: 160rpx;
					height: 160rpx;
					border-radius: 10rpx;
				}

				.mid-con {
					width: calc(100% - 360rpx);
					height: 100%;
					display: flex;
					flex-wrap: wrap;
					align-content: center;

					> view:nth-child(1) {
						width: 100%;
						font-size: 26rpx;
						font-weight: 500;
						color: #000;
						margin-bottom: 20rpx;
					}

					> view:last-child {
						width: 100%;
						display: flex;

						> text {
							color: #a5a5a5;
							font-size: 20rpx;
						}
						> text:nth-child(2) {
							margin: 0 10rpx;
						}
					}
				}
				.right-con {
					width: 100rpx;
					height: 100%;
					display: flex;
					align-items: center;
					> view {
						width: 170rpx;
						height: 50rpx;
						line-height: 50rpx;
						text-align: center;
						color: #0f80ff;
						font-size: 20rpx;
						border: 2rpx solid #0f80ff;
						background-color: #fff;
						border-radius: 45rpx;
					}
					.contine {
						background-color: #0f80ff;
						color: #fff;
					}
				}
			}
		}
	}
}
</style>
